<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '添加用户' : '编辑用户'" width="45%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px" size="default">
			<el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
				<el-form-item label="用户账号：" prop="userName">
					<el-input v-model="form.userName" placeholder="输入用户账号" style="min-width: 300px"></el-input>
				</el-form-item>

				<el-form-item label="用户名称：" prop="name">
					<el-input v-model="form.name" placeholder="输入用户名称" style="min-width: 300px"></el-input>
				</el-form-item>

				<el-form-item label="用户手机号：" prop="phone">
					<el-input v-model="form.phone" placeholder="输入用户手机号" style="min-width: 300px"></el-input>
				</el-form-item>

				<el-form-item label="用户密码：" prop="password" v-if="props.isAdd">
					<el-input v-model="form.password" type="password" show-password placeholder="输入用户密码" style="min-width: 300px"></el-input>
				</el-form-item>

				<el-form-item label="确认密码：" prop="confirmPassword" v-if="props.isAdd">
					<el-input v-model="form.confirmPassword" type="password" show-password placeholder="请确认密码" style="min-width: 300px"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { getEmnuList, addUser } from '/@/api/api';

const form = ref({});
const formRef = ref();
const loading = ref(false);
const isRequird = ref(true);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});
const dialogVisible = ref(false);

const equalToPassword = (rule, value, callback) => {
	if (form.value.password !== value) {
		callback(new Error('两次输入的密码不一致'));
	} else {
		callback();
	}
};

// 表单验证
const rules = reactive({
	userName: [{ required: true, message: '用户账号不能为空', trigger: 'blur' }],
	name: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
	phone: [{ required: true, message: '用户手机号不能为空', trigger: 'blur' }],
	password: [
		{ required: isRequird, message: '密码不能为空', trigger: 'blur' },
		// { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
		// {
		// 	pattern:
		// 		/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_]+$)(?![a-z0-9]+$)(?![a-z\\W_]+$)(?![0-9\\W_]+$)[a-zA-Z0-9\\W_]{8,}$/,
		// 	message: "密码需要包含大小写字母和数字且至少8位",
		// 	trigger: "blur"
		// }
	],
	confirmPassword: [
		{ required: isRequird, message: '确认密码不能为空', trigger: 'blur' },
		{ required: isRequird, validator: equalToPassword, trigger: 'blur' },
	],
});

// 监听弹框的显示和隐藏
watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		// isRequird.value = props.isAdd;
		if (val) {
			if (!props.isAdd) {
				form.value = JSON.parse(JSON.stringify(props.row));
			}
		}
	},
	{ deep: true }
);

// 表单提交
const submit = () => {
	// console.log(formRef.value)
	formRef.value.validate((valid) => {
		if (valid) {
			// console.log()
			if (props.isAdd) {
				addUserFun();
			} else {
				editUserFun();
			}
			//
		}
	});
};

// 添加
const addUserFun = async () => {
	const { userName, name, phone, password } = form.value;
	let params = {
		userName,
		name,
		phone,
		password,
	};
	// console.log(await addUser(params));
	const { code } = await addUser(params);
	if (code === 200) {
		ElMessage.success('添加成功');
		handleClose();
	}
};

// 编辑
const editUserFun = async () => {
	console.log(form.value);
	const { userName, name, phone, id } = form.value;
	let params = {
		userId: id,
		userName,
		name,
		phone,
	};
	const { code } = await addUser(params);
	if (code === 200) {
		ElMessage.success('编辑成功');
		handleClose();
	}
};

const emit = defineEmits(['handleClose']);
function handleClose() {
	form.value = {};
	// isRequird.value = true;
	// console.log('formRef.value', formRef.value)
	formRef.value.resetFields();
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}

.el-tree-node__content {
	height: 40px;
}

.select_all {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 30px;
	cursor: pointer;
	/* border: 1px solid #ececec;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 10px;
	height: 35px; */
}
</style>
